<template>
  <el-dialog
    :visible.sync="dialogFormVisible"
    @close="closeUploadVideoList"
    :before-close="beforeCloseAction"
  >
    <label
      slot="title"
      class="dialog-title"
    >上传视频</label>
    <el-table
      :data="fileList"
      header-row-class-name="table"
    >
      <el-table-column
        prop="name"
        label="视频名称"
      >
        <template slot-scope="scope">
          <span
            :title="scope.row.name"
          >{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="size"
        label="大小"
        width="200"
      >
        <template slot-scope="scope">
          <span>{{ returnVideoSize(scope.row.size) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="300"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0">等待上传</span>
          <span v-else-if="scope.row.status === 1">
            <template v-if="scope.row.shacurr === 1">
              已上传：{{ (scope.row.curr * 100).toFixed(1) }}%
            </template>
            <template v-else>
              视频校验 {{ (scope.row.shacurr * 100).toFixed(1) }}%
            </template>
          </span>
          <span v-else-if="scope.row.status === 2">上传成功</span>
          <span
            v-else-if="scope.row.status === 3"
          >
            上传失败，
            <el-button
              type="text"
              @click="restart(scope.row.fileId)"
            >请重试</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script lang="ts">
import Vue from 'vue'
import { Message, MessageBox } from 'element-ui'
export default Vue.extend({
  props: {
    // eslint-disable-next-line
    fileList: [],
  },
  data () {
    return {
      dialogFormVisible: true,
    }
  },
  methods: {
    // 关闭/取消选择视频弹窗
    closeUploadVideoList () {
      this.$emit('closeUploadVideoList')
    },
    returnVideoSize (videoSize: number) {
      if (videoSize > 0 && videoSize < 1024) {
        return (videoSize).toFixed(0) + 'K'
      } else if (videoSize >= 1024 && videoSize < 1024 * 1024) {
        return (videoSize / 1024).toFixed(0) + 'M'
      } else {
        return (videoSize / 1024 / 1024).toFixed(0) + 'G'
      }
    },
    beforeCloseAction (done: any) {
      if (this.$store.state.uploadingCount) {
        MessageBox.confirm('确定取消正在上传的视频？')
          .then(() => {
            this.closeUploadVideoList()
          }, () => {
          })
      } else {
        this.closeUploadVideoList()
      }
    },
  },
})
</script>
<style lang="scss" scoped>
.dialog {
  /deep/ .el-dialog__body {
    padding: 0 20px 40px;
  }
}
</style>
